<template>
  <view class="user-profile">
    <view class="header">
      <!-- 用户信息容器 -->
      <view class="user-info-container">
        <!-- 头像 -->
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> 
        <image class="avatar" :src="user.avatarUrl" mode="aspectFit" />
        </button>
        <!-- 登录按钮 -->
        <label @click="login" v-if="!user.isLoggedIn">
          去登录
        </label>
        <!-- 用户昵称 -->
        <text v-if="user.isLoggedIn" class="user-nickname">{{ user.nickname }}</text>
      </view>
    </view>

    <view class="options-list">
      <!-- 选项列表 -->
      <view class="option-item" @click="navigateToHistory">
        <span>搜题记录</span>
      </view>
      <view class="option-item" @click="shareFriends">
        <span>分享好友</span>
      </view>
      <view class="option-item" @click="navigateToFeedback">
        <span>反馈意见</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        isLoggedIn: false,
        avatarUrl: "/static/brick.png", // 默认头像
        nickname: "去登录",
        isVIP: false, // 用户 VIP 状态
      },
      backgroundImage: "/static/brick.png"
    };
  },
  mounted() {
    // 相当于 onLoad 的逻辑
    let token = uni.getStorageSync("token");
    if (token) {
      let userInfo = uni.getStorageSync("user");
      this.user.avatarUrl = userInfo.avatarUrl;
      this.user.nickname = userInfo.nickName;
      this.user.isVIP = userInfo.isVIP;
      this.user.isLoggedIn = true;
    } else {
      uni.showToast({
        title: "请登录...",
        icon: "none",
      });
    }
    console.log('页面加载完成');
  },
  methods: {
    navigateToHome() {
      uni.switchTab({ url: "/pages/user/user" });
    },
    navigateToHistory() {
      uni.navigateTo({ url: "/pages/history/history" });
    },
    onChooseAvatar(e) {
      console.log("detail", e.detail);
      this.user.avatarUrl = e.detail.avatarUrl;
    },
    login() {
      if (!this.user.isLoggedIn) {
        console.log("go login...");
        uni.navigateTo({
          url: '/pages/login/login',
          success: function () {
            // 跳转成功的处理
          },
          fail: function (err) {
            // 跳转失败的处理
            console.error('页面跳转失败：', err);
            uni.showToast({
              title: '跳转失败，请重试',
              icon: 'none'
            });
          }
        });
      }
    },
    shareFriends() {
      uni.share({
        provider: 'weixin',
        scene: "WXSceneSession",
        type: 5,
        imageUrl: '/static/brick.png',
        title: '欢迎体验小智搜题',
        miniProgram: {
          id: 'gh_abcdefg',
          path: 'pages/search/search',
          type: 0,
          webUrl: 'http://uniapp.dcloud.io'
        },
        success: ret => {
          console.log('share:', JSON.stringify(ret));
        }
      });
    },
    navigateToFeedback() {
      uni.navigateTo({ url: "/pages/feedback/feedback" });
    }
  }
};
</script>

<style scoped>
.avatar-wrapper {
  
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  margin-bottom: 10px
}

.user-profile {
  padding: 16px;
}

.header {
  background-color: #ffffff;
  height: 15vh;
  /* 顶部占据 1/4 高度 */
  position: relative;
}

.user-info-container {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* 默认圆形头像 */
  margin-right: 10px;
}
 
.user-nickname {
  margin-left: 10px;
}

.options-list {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f0f0f0;
}
</style>